<!DOCTYPE html>
<html>
<head>
    <title>数据操作Demo</title>
    <style>
        table { border-collapse: collapse; width: 80%; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h2>数据列表</h2>
    <table id="dataTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>描述</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <h2>添加新数据</h2>
    <form id="addForm">
        <input type="text" name="name" placeholder="名称" required>
        <input type="text" name="description" placeholder="描述">
        <button type="submit">提交</button>
    </form>

    <script>
        // 加载数据
        async function loadData() {
            const response = await fetch('http://localhost:5000/api/items');
            const items = await response.json();
            
            const tbody = document.querySelector('#dataTable tbody');
            tbody.innerHTML = '';
            
            items.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.description || ''}</td>
                    <td>
                        <button onclick="editItem(${item.id})">编辑</button>
                        <button onclick="deleteItem(${item.id})">删除</button>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }

        // 提交新数据
        document.getElementById('addForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            const data = {
                name: formData.get('name'),
                description: formData.get('description')
            };
            
            await fetch('http://localhost:5000/api/items', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            
            e.target.reset();
            loadData(); // 刷新列表
        });

        // 删除数据
        async function deleteItem(itemId) {
            if (confirm('确定删除吗？')) {
                await fetch(`http://localhost:5000/api/items/${itemId}`, {
                    method: 'DELETE'
                });
                loadData(); // 刷新列表
            }
        }

        // 编辑数据
        async function editItem(itemId) {
            // 获取该条数据
            const response = await fetch(`http://localhost:5000/api/items/${itemId}`);
            const item = await response.json();
            
            // 创建编辑表单
            const editDiv = document.createElement('div');
            editDiv.style.position = 'fixed';
            editDiv.style.top = '50%';
            editDiv.style.left = '50%';
            editDiv.style.transform = 'translate(-50%, -50%)';
            editDiv.style.backgroundColor = 'white';
            editDiv.style.padding = '20px';
            editDiv.style.border = '1px solid #ccc';
            editDiv.style.zIndex = '1000';
            editDiv.innerHTML = `
                <h2>编辑数据</h2>
                <form id="editForm">
                    <input type="hidden" name="id" value="${item.id}">
                    <div>
                        <label>名称:</label>
                        <input type="text" name="name" value="${item.name}" required>
                    </div>
                    <div>
                        <label>描述:</label>
                        <input type="text" name="description" value="${item.description || ''}">
                    </div>
                    <button type="submit">保存</button>
                    <button type="button" onclick="document.body.removeChild(this.parentNode.parentNode)">取消</button>
                </form>
            `;
            document.body.appendChild(editDiv);
            
            // 处理表单提交
            document.getElementById('editForm').addEventListener('submit', async (e) => {
                e.preventDefault();
                const formData = new FormData(e.target);
                const data = {
                    name: formData.get('name'),
                    description: formData.get('description')
                };
                
                await fetch(`http://localhost:5000/api/items/${itemId}`, {
                    method: 'PUT',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                });
                
                // 移除编辑表单
                document.body.removeChild(editDiv);
                loadData(); // 刷新列表
            });
        }

        // 初始化加载
        loadData();
    </script>
</body>
</html>
